<template>
  <!-- <view>
    <view>
      home
    </view>
    <pageComponent itjid="50107"></pageComponent>
  </view> -->
  <!--pages/home/home.wxml-->
  <view style="background:repeating-linear-gradient(to right,#d9edff,#EFECE7);">
    <!-- 头部模块 -->
    <view style="width: 100vw;position: relative;">
      <!-- 背景图 -->
      <image style="width: 100vw;padding-top: 120rpx;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/房子.png"
        mode="widthFix" />
      <!-- 信息块 -->
      <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
        <!-- 个人信息 -->
        <!-- <view style="display: flex;align-items: center;" :style="'padding-top:' + (navBarHeight + 10) + 'px'"> -->
        <view style="display: flex;align-items: center;padding-top:50px">
          <image style="width: 8vw;margin-left:20px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/我的图标.png"
            mode="widthFix" />
          <view style="margin-left:10px;">我的</view>
        </view>
        <!-- 图标按钮 -->
        <view>
          <view style="position: absolute;top: 37vw;bottom: 0;left: 16vw;right: 0;">
            <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/气.png" mode="widthFix" />
          </view>
          <view style="position: absolute;top: 41vw;bottom: 0;left: 36vw;right: 0;">
            <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电.png" mode="widthFix" />
          </view>
          <view style="position: absolute;top: 48vw;bottom: 0;left: 76vw;right: 0;">
            <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/视频监控.png"
              mode="widthFix" />
          </view>
          <view style="position: absolute;top: 65vw;bottom: 0;left: 5vw;right: 0;">
            <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/水.png" mode="widthFix" />
          </view>
          <view style="position: absolute;top: 80vw;bottom: 0;left: 61vw;right: 0;">
            <image style="width: 18vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/老年人.png"
              mode="widthFix" />
          </view>
          <view style="position: absolute;top: 98vw;bottom: 0;left: 80vw;right: 0;">
            <view style="width: 16vw;position: relative;">
              <image style="width: 100%" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/老人在家图标.png"
                mode="widthFix" />
              <view
                style="position: absolute;top: 0;bottom: 0;left:0;right: 16rpx;display: flex;justify-content: flex-end;align-items: center;font-size: 18rpx;">
                在家
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部卡片 -->
    <view style="width: 100%;margin-top:-180rpx ;position: relative;z-index: 1;">
      <!-- 卡片背景图 -->
      <image style="width: 100%;position: relative;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底部.png"
        mode="widthFix" />
      <!-- 卡片内容 -->
      <view
        style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;margin: 10px;">
        <!-- 卡片头部 -->
        <view style="width: 90%;height: 20%;display: flex;margin-bottom: 20rpx;">
          <!-- 左侧 -->
          <view
            style=" margin-left: 20rpx;display: flex;flex-direction: column;justify-content: center;height: 100%;width: 74%;">
            <view style="display: flex;margin-top:10rpx;">
              <image style="width: 60rpx;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/家庭图标.png"
                mode="widthFix" />
              <view style="font-size: 40rpx;color: white;font-weight: bold;margin-left: 20rpx;margin-top: auto;">家庭状况
              </view>
            </view>

            <view style="display: flex;margin-top:10rpx;">
              <view style="color: white;font-weight: bold;font-size: 24rpx;">
                <text>安全评级：</text>
                <text style="color:#A2D8C0 ;">优秀</text>
                <text style="font-weight: 100;">（水电气无异常报警）</text>
              </view>
            </view>

            <view style="display: flex;margin-top:10rpx;">
              <view style="color: white;font-weight: bold;font-size: 24rpx;">
                <text>老人身体情况：</text>
                <text style="color:#fc5724 ;">良好</text>
                <text style="font-weight: 100;">（心率偏低，血糖略高）</text>
              </view>
            </view>
          </view>

          <!-- 右侧 -->
          <view style="flex: 1;display: flex;align-items: center;justify-content: center;">
            <view style="font-size: 60rpx;font-weight: bold;">96</view>
          </view>
        </view>

        <!-- 卡片中部 -->
        <view style="width: 90%;">
          <!-- 实时健康监测 -->
          <view>
            <view style="font-weight: bold;">实时健康监测</view>
            <!-- 数据展示 -->
            <view style="display: flex;">

              <!-- 心率 -->
              <view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
                <view
                  style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                  <image style="width: 60rpx;position: absolute;left:10%;top:10%"
                    src="https://www.ruanzi.net/jy/wxuser/103/images/pages/偏低图标.png" mode="widthFix">
                  </image>
                  <view style="width: 75%;margin-top: 20rpx;;display: flex;flex-direction: column;align-items: center;">
                    <image style="width: 45rpx;margin-top: 60rpx;"
                      src="https://www.ruanzi.net/jy/wxuser/103/images/pages/心率.png" mode="widthFix" />
                    <view style="color: #FF5340;height: 60rpx;display: flex;align-items: center;">
                      <text style="font-size: 45rpx;">30</text><text style="font-size: 20rpx;">次/分</text>
                    </view>
                    <view style="font-size: 20rpx;">60-100次/分</view>
                    <view style="color: #E35D00;font-size: 28rpx;font-weight: bold;">
                      心率偏低
                    </view>
                    <view style="font-size: 20rpx;text-align: center;">
                      观察是否头晕，不适请就医。
                    </view>
                  </view>
                </view>
              </view>

              <!-- 血糖 -->
              <view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
                <view
                  style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                  <image style="width: 60rpx;position: absolute;right:10%;top:10%"
                    src="https://www.ruanzi.net/jy/wxuser/103/images/pages/偏高图标.png" mode="widthFix">
                  </image>
                  <view style="width: 75%;margin-top: 20rpx;;display: flex;flex-direction: column;align-items: center;">
                    <image style="width: 45rpx;margin-top: 60rpx;"
                      src="https://www.ruanzi.net/jy/wxuser/103/images/pages/血糖.png" mode="widthFix" />
                    <view style="color: #FE8B00;height: 60rpx;display: flex;align-items: center;">
                      <text style="font-size: 45rpx;">7.8</text><text style="font-size: 15rpx;">mmol/L</text>
                    </view>
                    <view style="font-size: 20rpx;">3.9-7.8mmol/L</view>
                    <view style="color: #D92400;font-size: 28rpx;font-weight: bold;">
                      血糖略高
                    </view>
                    <view style="font-size: 20rpx;text-align: center;">
                      建议减少主食，多吃蔬菜。
                    </view>
                  </view>
                </view>
              </view>

              <!-- 血压 -->
              <view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
                <view
                  style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                  <image style="width: 60rpx;position: absolute;top:5%"
                    src="https://www.ruanzi.net/jy/wxuser/103/images/pages/正常图标.png" mode="widthFix">
                  </image>
                  <view style="width: 75%;margin-top: 20rpx;;display: flex;flex-direction: column;align-items: center;">
                    <image style="width: 45rpx;margin-top: 60rpx;"
                      src="https://www.ruanzi.net/jy/wxuser/103/images/pages/血压.png" mode="widthFix" />
                    <view style="color: #E35D00;height: 60rpx;display: flex;align-items: center;">
                      <text style="font-size: 32rpx;">130/85</text>
                    </view>
                    <view style="font-size: 20rpx;">＜140/90mmHg</view>
                    <view style="color: #299A0C;font-size: 28rpx;font-weight: bold;">
                      血压正常
                    </view>
                    <view style="font-size: 20rpx;text-align: center;">
                      注意少盐。
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </view>

          <!-- 今日水电趋势 -->
          <view style="margin-top: 10rpx;">
            <view style="font-weight: bold;">
              今日水电趋势
            </view>
            <!-- 数据展示 -->
            <view style="display: flex;">
              <!-- 左侧卡片 -->
              <view style="flex: 1;display:flex;flex-direction: column;align-items: center;">
                <view style="font-size: 20rpx;">
                  今日用电
                </view>
                <!-- 卡片 -->
                <view style="width:90%;position: relative;">
                  <image style="width:100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底2.png"
                    mode="widthFix" />
                  <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;align-items: center;">
                    <view
                      style="margin-left: 20rpx;height: 70%;color: white;font-size: 20rpx;display: flex;flex-direction: column;justify-content: space-around;">
                      <view style="">
                        比昨日同时
                      </view>
                      <view style="margin-left: 20rpx;display: flex;">
                        <image v-if="state_electric == 1" style="width: 25%;"
                          src="https://www.ruanzi.net/jy/wxuser/103/images/pages/上1.png" mode="widthFix"></image>
                        <image v-if="state_electric == 0" style="width: 25%;"
                          src="https://www.ruanzi.net/jy/wxuser/103/images/pages/下1.png" mode="widthFix"></image>
                        <text style="font-weight: bold;">0.8kwh</text>
                      </view>
                      <view style="">
                        <text style="font-size: 16rpx;">预计今日为</text>
                        <text style="font-weight: bold;">8kwh</text>
                      </view>
                    </view>
                    <view style="width: 45%;position: absolute;top: 10%;right: 0;">
                      <image style="width: 100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/图标.png"
                        mode="widthFix" />
                      <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
                        <view
                          style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;">
                          <view style="color: #97F7FA;">
                            <text style="font-size: 40rpx;">5.6</text>
                            <text style="font-size: 12rpx;margin-top: auto;">kwh</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 右侧卡片 -->
              <view style="flex: 1;display:flex;flex-direction: column;align-items: center;">
                <view style="font-size: 20rpx;">
                  今日用水
                </view>
                <!-- 卡片 -->
                <view style="width:90%;position: relative;">
                  <image style="width:100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底2.png"
                    mode="widthFix" />

                  <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;align-items: center;">
                    <view
                      style="margin-left: 20rpx;height: 70%;color: white;font-size: 20rpx;display: flex;flex-direction: column;justify-content: space-around;">
                      <view style="">
                        比昨日同时
                      </view>
                      <view style="margin-left: 20rpx;display: flex;">
                        <image v-if="state_water == 1" style="width: 25%;"
                          src="https://www.ruanzi.net/jy/wxuser/103/images/pages/上1.png" mode="widthFix"></image>
                        <image v-if="state_water == 0" style="width: 25%;"
                          src="https://www.ruanzi.net/jy/wxuser/103/images/pages/下1.png" mode="widthFix"></image>
                        <text style="font-weight: bold;">32L</text>
                      </view>
                      <view style="">
                        <text style="font-size: 16rpx;">预计今日为</text>
                        <text style="font-weight: bold;">531L</text>
                      </view>
                    </view>
                    <view style="width: 45%;position: absolute;top: 10%;right: 0;">
                      <image style="width: 100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/图标.png"
                        mode="widthFix" />
                      <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
                        <view
                          style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;">
                          <view style="color: #97F7FA;">
                            <text style="font-size: 36rpx;">325</text>
                            <text style="font-size: 22rpx;margin-top: auto;">L</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 智能建议 -->
          <view style="margin-top: 10rpx;">
            <view style="font-size: 22rpx;font-weight: bold;">
              智能建议
            </view>
            <view style="font-size: 22rpx;color: #555557;">
              <text>1.错峰节能：中午12-14点使用洗衣/洗碗机（省电+自然晾晒）</text>
              <text>2.随手断电：睡前关闭路由器、机顶盒（年省200元）</text>
              <text>3.异常警报：今晚用电峰值过高（2kWh），请检查空调是否低于26℃或忘记关大功率电器。</text>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>

</template>

<script setup>
  // import pageComponent from "/components/dynamicPage/pageComponent/pageComponent.vue"
  import {
    onMounted,
    ref
  } from 'vue';

  // 胶囊高度
  const navBarHeight = ref(0)
  onMounted(() => {
    uni.getSystemInfo({
      success(res) {
        let top = res.statusBarHeight;
        let custom = uni.getMenuButtonBoundingClientRect();
        navBarHeight.value = custom.height + (custom.top - res.statusBarHeight) * 2;
      }
    })
  })

  const state_water = 0
  const state_electric = 1
</script>

<style></style>